/************************** Prime tools **************************/
/*!
 * prime v1.0.1 (https://github.com/dannyxu100/prime)
 * 版权所有 danny.xu
 */

// 混合
@import "mixins/prefix.less";
@import "mixins/common.less";

.wrapper-theme {
    // color: rgba(255,255,255, 1);
    // background: rgb(186, 233, 232);
    // background: rgb(255, 255, 255);
    .container {
        width: 100%;
        max-width: 1200px;
        h1 {
            font-size: 60px;
        }
        .section {
            padding: 20px;
            margin-bottom: 30px;
        }

        .colorblock,
        .colorblock-min {
            position: relative;
            // z-index: 1;
            width: 100%;
            height: 100px;
            line-height: 20px;
            font-size: 13px;
            padding: 10px 10px;
            text-align: center;
            border: 0px;
            cursor: default;
            .prefix-transition();
            .inputcolor {
                width: 100%;
                text-align: center;
                border: none;
            }
        }
        .colorblock.active {
            border-bottom: 2px solid #A22613;
        }
        .colorblock-min{
            height: 0px;
            padding: 0px;
            border: 15px solid #fff;
            border-width: 15px 0 0;
        }
        .colorblock:not(.empty):hover,
        .colorblock-min:not(.empty):hover {
            z-index: 2;
            .prefix-box-shadow(0px 5px 25px 3px rgba( 0, 0, 0, .2));
        }

        .grid-row {
            .prefix-transition();
            [class^="cell-"] {
                .prefix-transition();
            }
        }
        .fillblock {
            width:100%;
            font-size: 14px;
            color: rgba(0, 159, 255, 1);
            background: rgba(243,243,243, .3);
            border: none;
            padding: 5px 0px;
            cursor: pointer;
            .prefix-transition();
        }
        .fillblock:hover {
            // border-color: #ddd;
            color: rgba(104,104,104, 1);
            background: rgba(255,255,255, 1);
            .prefix-box-shadow(0px 10px 25px 0 rgba( 0, 0, 0, .15));
        }
        .fillblock:focus {
            outline: none;
        }

        .rdsbox,
        .rdsboxp {
            width: 80px;
            height: 80px;
            line-height: 80px;
            background: #ddd;
            border:1px solid #ccc;
            margin: 5px;
            font-size: 12px;
            text-align: center;
        }
        .rdsboxp {
            background: #F5F5F5;
            border:1px solid #999;
        }

        .textbox5 {
            padding-top: 0px; padding-bottom: 0px;
        }
        .textbox10 {
            padding-top: 10px; padding-bottom: 10px;
        }

        .bgimg-light {
            background:center url(/vue/images/prime/bg-1.png);
            padding: 20px;
            .prefix-border-radius(10px);
        }
        .bgimg-dark {
            background:center url(/vue/images/prime/bg-2.png);
            padding: 20px;
            .prefix-border-radius(10px);
        }
        .bgimg-gray {
            background:center url(/vue/images/prime/bg-3.png);
            padding: 20px;
            .prefix-border-radius(10px);
        }

        .demo-popmenuopen {
            position: relative;
            height: 260px;
        }
        .demo-popmenuopen > .popmenu {
            display: block;
        }

        .demo-dlg {
            position: relative;
            height: 400px;
        }
        .demo-dlg .dlg{
            position: absolute;
        }

        .demo-iconfont .iconfont,
        .demo-iconfont-sys .iconfont {
            font-size: 26px;
            margin: 20px;
            color: rgb(184, 240, 255);
            cursor: pointer;
            .prefix-transition();
        }
        .demo-iconfont .iconfont:hover {
            color: rgb(255, 255, 255);
        }
        .demo-iconfont-sys .iconfont {
            color: rgb(60, 0, 187);
        }
        .demo-iconfont-sys .iconfont:hover {
            color: rgb(255, 255, 255);
        }

        .selector-font {
            margin-right: 10px;
            margin-bottom: 5px;
        }
    }
}
.wrapper-theme-ctrl {
    color: rgba(255,255,255,1);
    .container {
        width: 100%;
        max-width: 1200px;
        h1 {
            font-size: 60px;
        }
        small {
            color: rgba(255,255,255,.6);
        }
        .section {
            padding: 20px;
            margin-bottom: 30px;
        }
    }
}